<template>
  <div id="app">
    <van-pull-refresh style="min-height: 100vh;" v-model="isLoading" @refresh="onRefresh">  
      <div class="wrap">
        <div class="filter_wrap"></div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.wrap {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background: url("https://huazizhanye.oss-cn-beijing.aliyuncs.com/web-mini/home_back_heard.png")
    no-repeat;
  height: 400px;
  width: 100%;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  .filter_wrap {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-linear-backdrop-filter: blur(5px);
    -o-linear-backdrop-filter: blur(5px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    height: 92%;
    width: 95%;
    margin: 20px auto;
  }
}
</style>
